<template>
	<view>
		<scroll-view scroll-y class="page ">
			<view class="content-wrapper">
				<view class="banner">
					<view class="logo"></view>
					<view class="title">
						小西校园通
					</view>
				</view>
				
				<view class="sm-margin-top">
					<view class="box-large"></view>
					<view class="flex-wrapper sm-margin-top">
						<view class="box-middle"></view>
						<view class="box-middle"></view>
					</view>
				</view>
				
				<view class="cu-list menu sm-border card-menu sm-margin-top">
					<view class="cu-item arrow" v-for="item in menu">
						<view class="content">
							<text :class="[item.icon,item.color]"></text>
							<text class="text-grey">{{item.text}}</text>
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menu: [{
						icon: 'cuIcon-post',
						text: '教务系统',
						color: 'text-orange'
					},
					{
						icon: 'cuIcon-group',
						text: '加入我们',
						color: 'text-olive'
					},
					{
						icon: 'cuIcon-text',
						text: '关于西大指南',
						color: 'text-green'
					},
					{
						icon: 'cuIcon-friendfill',
						text: '合作',
						color: 'text-blue'
					},
					{
						icon: 'cuIcon-share',
						text: '分享',
						color: 'text-pink'
					},
				]

			}
		},
		methods: {

		}
	}
</script>

<style>
	.page {
		height: 100vh;
	}
	.content-wrapper{
		padding-bottom: 200rpx;
	}
	.banner {
		width: 100%;
		height: 400rpx;
		background: #007AFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.banner .title {
		font-size: 20px;
		color: #fff;
		font-weight: 600;
		text-align: center;
		margin-top: 10px;
	}

	.banner .logo {
		width: 80px;
		height: 80px;
		background: antiquewhite;
		margin: 0 auto;
	}

	.box-large {
		width: 50%;
		height: 200rpx;
		background: antiquewhite;
		margin: 0 auto;
	}

	.box-middle {
		width: 30%;
		height: 200rpx;
		display: inline-block;
		background: antiquewhite;
	}

	.window {
		margin-top: ;
	}

	.flex-wrapper {
		display: flex;
		justify-content: space-around;
	}
</style>
